<template>
  <div id="app">

    <el-container>
      <el-aside width="200px">
<!--logo-->
        <div class="logo">
          <img src="./assets/logo-wukong.jpg"  alt=""/>
          <span>二孬</span>
        </div>


<!--        导航-->
        <el-scrollbar>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"

             >
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统相关</span>
              </template>
              <el-menu-item index="3" >
                <i class="el-icon-document"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">角色管理</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-setting"></i>
                <span slot="title">权限管理</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>基础数据</span>
              </template>
              <el-menu-item index="3" >
                <i class="el-icon-document"></i>
                <span slot="title">品牌管理</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">分类管理</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-setting"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单相关</span>
              </template>
              <el-menu-item index="3" >
                <i class="el-icon-document"></i>
                <span slot="title">购物车</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">销售相关</span>
              </el-menu-item>

            </el-submenu>

          </el-menu>
        </el-scrollbar>

      </el-aside>
      <el-container>
        <el-header>小程后台</el-header>
        <el-main>
          <el-card class="box-card">
           <router-view/>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<style lang="scss" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

html, body, #app ,.el-container{
  height: 100%;
  width:100%;
}
 .el-header,  {
   background-color: lightseagreen;
   color: white;
   text-align: center;
   line-height: 60px;
   font-size: 18px;
   font-weight: 700;
   font-family: 华文行楷;
 }

.el-aside {
  background-color: white;
  color: #333;
  .logo{
    height: 60px;
    background-color: lightseagreen;
    line-height: 60px;

    img{
      height: 40px;
      width: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 8px;
      margin-left: 15px;
    }

    span{
      font-size: 18px;
      font-weight: 700;
      color: white;
      font-family: 华文行楷;
    }

    .el-menu{
      height: calc(100%-60px);
      background-color: white;
    }


    .el-scrollbar{
      height: calc(100%-60px);
    }

  }

}

.el-main {
  padding: 0 !important;
  overflow: hidden !important;
  .box-card{
    height: 100%;
    width: 100%;
    margin: 3px 0 0 3px;
  }
}





</style>
